<template>
    <!-- 表单 -->
    <el-form :model="form">
        <!-- 新增用例 -->
        <el-button type="primary" @click="dialogVisible = true; Title = '添加用例'; clearHandle()">新增用例</el-button>

        <el-button style="left: 100px;" type="primary" @click="runCase">批量执行</el-button>


    </el-form>

    <!-- 用例数量： -->
    <el-text type="success" style="font-size: 20px; display: inline-block; margin-top: 10px;">用例数量：{{ total }}</el-text>

    <el-scrollbar height="500px">

        <el-table :data="tableData" ref="multipleTableRef" data="tableData" style="width: 100%;"
            @selection-change="selectionChange">
            <el-table-column type="selection" width="70" />
            <el-table-column prop="id" label="用例ID" width="100" />
            <el-table-column prop="name" label="用例名称" width="130" />
            <el-table-column prop="url" label="请示URL" width="350" />
            <el-table-column prop="method" label="请示方法" width="100" />
            <el-table-column prop="params" label="参数" width="150" />
            <el-table-column prop="data" label="数据" width="200" />

            <el-table-column label="操作">
                <template #default="scope">
                    <!-- 修改用例数据 -->
                    <el-button size="small"
                        @click="editHandle(scope.$index); dialogVisible = true; Title = '修改用例'">修改</el-button>

                    <!-- 删除用例 -->
                    <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>




                    <!-- 调试用例 -->
                    <el-button size="small" type="primary" @click="debug(scope.row.id)">调试</el-button>

                </template>
            </el-table-column>
        </el-table>
    </el-scrollbar>

    <!-- 新增Dialog对话框 -->
    <el-dialog v-model="dialogVisible" :title='Title' width="50%" :before-close="handleClose">
        <!-- 新增表单-->
        <!-- 表单 -->
        <el-form :model="form">
            <el-form-item v-if="status == 'edit'" label="ID" :label-width="useFormLabelWidth">
                <el-input disabled v-model="form.id" autocomplete="off" />
            </el-form-item>


            <el-form-item label="名称" :label-width="useFormLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="路径" :label-width="useFormLabelWidth">
                <el-input v-model="form.url" autocomplete="off" />
            </el-form-item>
            <!-- 请求方法是下拉 -->
            <el-form-item label="请求方法" :label-width="useFormLabelWidth">
                <el-select class="m-2" v-model="form.method" size="large" placeholder="">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>

            </el-form-item>
            <el-form-item label="参数" :label-width="useFormLabelWidth">
                <el-input type="textarea" placeholder="" v-model="form.params" autocomplete="off" />
            </el-form-item>
            <el-form-item label="数据" :label-width="useFormLabelWidth">
                <el-input type="textarea" v-model="form.data" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">

                <!-- <el-button type="primary" @click="clearHandle">清空</el-button> -->

                <el-button type="primary" @click="dialogVisible = false">取消</el-button>
                <el-button :plain="true" type="primary" @click="handleSubmit(); dialogVisible = false;">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>



<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useFormLabelWidth } from 'element-plus/es/components/form/src/utils';
import API from '../api/http';


// 选中用例
const selectItem = ref([])
const selectionChange = (item) => {
    console.log('item', item)
    selectItem.value = item.map(value => value.id)
    console.log('selectItem.value', selectItem.value)
}

// 运行用例
const runCase = () => {
    console.log('selectItem.value', selectItem.value)
    if (selectItem.value?.length > 0) {
        $api.task.executeTask({ ids: selectItem.value }).then((result) => {
            console.log('result', result)
            ElMessage.success(result.data.msg)
        })
    } else {
        ElMessage.info('请选择用例')
    }
}






// Dialog框
// 新增Dialog对话框
const dialogVisible = ref(false)
const handleClose = (done) => {
    ElMessageBox.confirm('确定要关闭新增用例对话框吗？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

// 调试用例

const debug = (id) => {
    $api.testcase.debugTestcase({ id: id }).then((result) => {
        console.log('result', result)
        ElMessage.success(result.data.msg)
    })
}

// 设置是否是添加还是修改
const status = ref("add")

// 判断新增还是修改
const handleSubmit = () => {
    if (status.value == 'add') {
        status.value = "add"
        // 新增用例
        $api.testcase.addTestcase(form.value).then((result) => {
            console.log('result', result)
            ElMessage.success(result.data.msg)
            $api.testcase.getTestcase().then((result) => {
                console.log('result', result)
                tableData.value = result.data.data
            })

        })
    } else {
        // 修改用例
        $api.testcase.updateTestcase(form.value).then((result) => {
            console.log('result', result)
            ElMessage.success(result.data.msg)
        })
    }
}

// 删除操作
const handleDelete = (id) => {
    ElMessageBox.confirm(
        '确定删除？删除后数据将无法找回',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 删除用例
            // 调用删除接口
            $api.testcase.deleteTestcase({ id: id }).then((result) => {
                console.log('result', result)
                ElMessage.success(result.data.msg)
                // 删除成功后，调用查询接口，加载表格数据
                $api.testcase.getTestcase().then((result) => {
                    console.log('result', result)
                    tableData.value = result.data.data
                })
            })
        })
        .catch(() => {
            ElMessage.info('取消删除')
        })
}



// 请求方式下拉菜单
const options = [
    {
        value: 'PUT',
        label: 'PUT',
    },
    {
        value: 'GET',
        label: 'GET',
    },
    {
        value: 'POST',
        label: 'POST',
    },
    {
        value: 'DELETE',
        label: 'DELETE',
    },
]

const tableData = ref([])
// 一个计算属性 ref
const total = computed(() => {
    return tableData.value.length
})



// 清空输入框
const clearHandle = () => {
    form.value = {
        name: '',
        url: '',
        method: '',
        params: '',
        data: ''
    }
    status.value = "add"
}
// 修改
const editHandle = (index) => {
    form.value = tableData.value[index]
    status.value = "edit"
}



// 获取数据库数据
// 表单数据
const form = ref()
// 初始化表单
const initForm = () => {
    form.value = {
        name: '',
        url: '',
        method: '',
        params: '',
        data: '',
    }
}
// 初始化数据
const initData = () => {
    $api.testcase.getTestcase().then((result) => {
        console.log('result', result)
        tableData.value = result.data.data
        ElMessage.success(result.data.msg)
    })
}


// 初始化界面
onMounted(() => {
    initForm()
    initData()
})
</script>

<style scoped>
/* Dialog对话框 */
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>